<template>
	<view class="car-count">
		<view class="cart-box" v-if="carts.length > 0">
			<view
				class="touch-item"
				v-for="(item, index) in carts"
				:class="item.isTouchMove == true ? 'touch-move-active' : ''"
				:key="item.id"
				@touchstart="touchstart"
				@touchmove="touchmove"
				:data-index="index"
			>
				<view class="cartList clearfix">
					<view @click="selectList(index)" class="selBtn centerboth">
						<image class="active-icon" v-if="item.selected" src="../../static/icon/avtive.png" mode=""></image>
						<text v-else class="iconfont car-unsel"></text>
					</view>
					<view class="gmes">
						<view class="cartImg centerboth">
							<image :src="item.goods.show_images" mode="aspectFit"></image>
						</view>
						<view class="boxCount clearfix">
							<text class="gname line1">{{ item.goods.name }}</text>
							<view class="gtitle line1">{{ item.spec_key_name }}</view>
							<view class="gprice">
								<text>￥</text>
								{{ item.goods_spec.price * item.buy_num }}
							</view>
						</view>
					</view>
					<!-- 					<view class="countBox centerboth">
						<view class="carSub" @click="changeNum(index, item.id, 0)">
							<text class="iconfont car-sub"></text>
						</view>
						<view class="cartNum">{{ item.buy_num }}</view>
						<view class="carAdd" @click="changeNum(index, item.id, 1)">
							<text class="iconfont car-add"></text>
						</view>
					</view> -->

					<view class="countBox centerboth">
						<view class="carSub" @click="changeNum(index, item.id, 0)">-</view>
						<view class="cartNum">{{ item.buy_num }}</view>
						<view class="carAdd" @click="changeNum(index, item.id, 1)">+</view>
					</view>

					<view class="dleBtn" @click="deleteList(index, item.id)">
						<image class="del-img" src="../../static/icon/del.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="botomBtn">
			<view @click="allSelBtn" class="selBtn centerboth">
				<image class="active-icon" v-if="selectAll" src="../../static/icon/avtive.png" mode=""></image>
				<image class="active-icon" v-else src="../../static/icon/aaa.png" mode=""></image>
				<!-- <text v-else class="iconfont car-unsel" style="margin-right: 2rpx"></text> -->
				<text>全选</text>
			</view>
			<view class="price">
				合计：
				<text class="fh">￥</text>
				<text class="num">{{ totalPrice }}</text>
			</view>
			<view @click="jiesuan" class="yyBtn">结算({{ totalNum }})</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		carts: {
			//提示信息字体颜色
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			totalPrice: 0, // 总价，初始为0
			selectAll: true, // 全选状态，默认无选中 ，false全选
			startX: 0, //开始坐标
			startY: 0,
			totalNum: 0
		};
	},
	mounted() {
		this.allSelBtn();
		this.getTotalPrice();
	},
	created() {},
	computed: {},
	methods: {
		jiesuan: function () {
			var that = this;
			var items = [];
			var list = that.carts;
			for (var i = 0; i < list.length; i++) {
				if (list[i].selected == true) {
					items.push(list[i]);
				}
			}

			if (items.length <= 0) {
				uni.showToast({
					title: '请选择要结算的商品',
					icon: 'none'
				});
				return false;
			}
			// var ids = idArr.toString(',');
			this.$emit('jsBtn', items);
		},
		/**
		 * 修改商品数量
		 */
		changeNum: function (index, id, type) {
			var that = this;
			var carts = that.carts;
			var number = parseInt(carts[index].buy_num);
			if (type == 0) {
				number = number - 1;
				if (number <= 1) {
					number = 1;
				}
			} else {
				number = number + 1;
			}
			carts[index].buy_num = number;
			this.$emit('changeNum', carts, id, carts[index].buy_num);
		},
		/**
		 * 删除购物车当前商品
		 */
		deleteList(index, ids) {
			var that = this;
			let carts = that.carts;
			this.$emit('delBtn', carts, ids, index);
		},
		/**
		 * 当前商品选中事件
		 */
		selectList: function (index) {
			var leng = 0;
			var that = this;
			var carts = that.carts;
			var selected = carts[index].selected;
			carts[index].selected = !selected;

			for (var i = 0; i < carts.length; i++) {
				if (carts[i].selected == false) {
					that.selectAll = false;
				}
				if (carts[i].selected == true) {
					leng = leng + 1;
				}
			}
			if (leng == carts.length) {
				that.selectAll = true;
			}
			this.$emit('selThis', carts);
		},
		allSelBtn: function (e) {
			var that = this;
			var selectAll = that.selectAll;
			selectAll = !selectAll;
			var carts = that.carts;

			for (var i = 0; i < carts.length; i++) {
				carts[i].selected = selectAll;
			}
			that.selectAll = selectAll;
			this.$emit('selAllBtn', carts);
		},
		/**
		 * 计算总价
		 */
		getTotalPrice: function () {
			var that = this;
			var carts = that.carts; // 获取购物车列表
			var total = 0;
			var totalnum = 0;
			for (var i = 0; i < carts.length; i++) {
				// 循环列表得到每个数据
				if (carts[i].selected) {
					// 判断选中才会计算价格
					total += carts[i].buy_num * carts[i].goods_spec.price; // 所有价格加起来
					totalnum = totalnum + parseInt(carts[i].buy_num);
				}
			}
			that.totalNum = totalnum;
			that.totalPrice = total.toFixed(2);
		},
		touchstart: function (e) {
			var that = this;
			var carts = that.carts;
			//开始触摸时 重置所有删除
			carts.forEach(function (v, i) {
				0;
				if (v.isTouchMove)
					//只操作为true的
					v.isTouchMove = false;
			});
			that.startX = e.changedTouches[0].clientX;
			that.startY = e.changedTouches[0].clientY;
			this.$emit('touchEv', carts);
		},
		//滑动事件处理
		touchmove: function (e) {
			var that = this;
			var carts = that.carts;
			var index = e.currentTarget.dataset.index, //当前索引
				startX = that.startX, //开始X坐标
				startY = that.startY, //开始Y坐标
				touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
				touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
				//获取滑动角度
				angle = that.angle(
					{
						X: startX,
						Y: startY
					},
					{
						X: touchMoveX,
						Y: touchMoveY
					}
				);
			carts.forEach(function (v, i) {
				v.isTouchMove = false;
				//滑动超过30度角 return
				if (Math.abs(angle) > 30) return;
				if (i == index) {
					if (touchMoveX > startX)
						//右滑
						v.isTouchMove = false;
					//左滑
					else v.isTouchMove = true;
				}
			});
			//更新数据
			this.$emit('touchEv', carts);
		},
		angle: function (start, end) {
			var _X = end.X - start.X,
				_Y = end.Y - start.Y;
			//返回角度 /Math.atan()返回数字的反正切值
			return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
		}
	}
};
</script>

<style lang="scss" scoped>
@font-face {
	font-family: 'iconfont'; /* project id 1143282 */
	src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot');
	src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot?#iefix') format('embedded-opentype'),
		url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff2') format('woff2'), url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff') format('woff'),
		url('https://at.alicdn.com/t/font_1143282_zy7677qexck.ttf') format('truetype'), url('https://at.alicdn.com/t/font_1143282_zy7677qexck.svg#iconfont') format('svg');
}

.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.active-icon {
	width: 44rpx !important;
	height: 44rpx !important;
	margin: 0 !important;
}
.car-add:before {
	content: '\e8a6';
}
.car-sub:before {
	content: '\e8a7';
}
.car-no:before {
	content: '\e64d';
}
.car-unsel:before {
	content: '\e63a';
}
.car-sel:before {
	content: '\e639';
}
.car-del:before {
	content: '\e622';
}

/*有商品时*/
.car-count {
	width: 100%;
}
.cart-box {
	width: 100%;
	overflow: hidden;
	padding-bottom: 100rpx;
}

.cartList {
	width: 100%;
	position: relative;
	padding: 20rpx 20rpx 20rpx 50rpx;
	font-size: 26rpx;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: translateX(60px);
	transform: translateX(60px);
	margin-left: -60px;
	background: #fff;
	margin-top: 30rpx;
}

.boxCount {
	float: left;
}

.boxCount .gname {
	font-size: 32rpx;
	color: #333333;
}

.boxCount .gtitle {
	margin: 5rpx 0 15rpx 0;
	font-size: 24rpx;
	color: #999999;
}

.gprice {
	color: #e60012;
	font-size: 34rpx;
}

.gprice text {
	font-size: 24rpx;
}

.cartList .selBtn {
	position: absolute;
	left: 0;
	width: 50rpx;
	height: 100%;
	top: 0;
}

.cartList .selBtn image {
	width: 32rpx;
	height: 32rpx;
}

.cartList .cartImg {
	float: left;
	width: 145rpx;
	height: 145rpx;
	background: #f5f5f5;
	border-radius: 5rpx;
	overflow: hidden;
	margin-right: 20rpx;
}

.countBox {
	position: absolute;
	right: 40rpx;
	bottom: 30rpx;
	background-color: #cfae7d;
	padding: 12rpx 28rpx;
	color: #fff;
	border-radius: 14rpx;
	font-size: 32rpx;
}

.countBox .iconfont {
	font-size: 46rpx;
}

.cartNum {
	width: 80rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	font-size: 32rpx;
}

.dleBtn {
	position: absolute;
	right: 0;
	top: 0;
	width: 120rpx;
	height: 100%;

	background: $uni-theme-color;

	z-index: 9999;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: translateX(70px);
	transform: translateX(70px);
	display: flex;
	align-items: center;
	justify-content: center;
	.del-img {
		width: 30rpx;
	}
}

.touch-move-active .cartList,
.touch-move-active .dleBtn {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.touch-move-active .dleBtn {
	right: -120rpx;
}

.botomBtn {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #ffffff;
	box-shadow: #f3f3f3 0rpx -5rpx 10rpx;
	height: 98rpx;
	padding: 0 300rpx 0 30rpx;
	z-index: 99;
}

.botomBtn .price {
	float: right;
	line-height: 98rpx;
	font-size: 28rpx;
	color: #333333;
}

.botomBtn .price text {
	font-size: 24rpx;
	color: #e60012;
}

.botomBtn .price .num {
	font-size: 30rpx;
	font-weight: bold;
}

.botomBtn .yyBtn {
	position: absolute;
	right: 30rpx;
	width: 240rpx;
	height: 89rpx;
	font-size: 32rpx;
	background: $uni-theme-color;
	color: #ffffff;
	text-align: center;
	border-radius: 5rpx;
	line-height: 89rpx;
	top: 5rpx;
}

.botomBtn .selBtn {
	position: absolute;
	height: 100%;
	float: left;
}

.botomBtn .selBtn image {
	width: 32rpx;
	height: 32rpx;
	margin: 0 10rpx;
}
</style>
